<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form ref="form" :model="form">
            <el-form-item label="类型名称：">
              <el-input
                v-model="select.name"
                placeholder="请输入"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="8">
          <el-form ref="form" :model="form" style="float: left">
            <el-form-item>
              <el-button size="mini" type="primary" @click="screeningData"
                >查 询</el-button
              >
              <!-- <el-button size="mini" type="success" @click="handleAdd"
                >新 增</el-button
              > -->
              <!-- <el-button style="padding: 0; border: 0">
                <el-upload
                  action="/上传文件的接口"
                  :on-change="onChange"
                  :auto-upload="false"
                  :show-file-list="false"
                  accept=".xls, .xlsx"
                  class="upload"
                >
                  <el-button size="mini" type="success">导 入</el-button>
                </el-upload>
              </el-button> -->
              <el-button size="mini" type="warning" @click="exportExcel"
                >导 出</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      highlight-current-row
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column prop="ID" label="编号" align="center"></el-table-column>
      <el-table-column
        prop="TYPENAME"
        label="类型名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="CYCLESTR"
        label="考核周期"
        align="center"
      ></el-table-column>
      <!-- <el-table-column  prop="ZB" label="分值占比" align="center" ></el-table-column> -->
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <!-- <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="isVisibleEdit"
      width="800px"
    >
      <el-form ref="form" :model="form" class="flex">
        <el-form-item label="考核类型：" label-width="100px">
          <el-input v-model="form.TYPENAME" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="考核周期（日）：" label-width="150px">
          <el-input :disabled="value1" v-model="form.CYCLE" placeholder="请输入" style="width:150px;padding-right:15px;"></el-input>
          <el-switch
  v-model="value1"
  active-text="不定期">
</el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'

import export2Excel from '@/utils/exportExcel/index.js'
import OSS from 'ali-oss';
import { time } from 'echarts';
export default {
  data () {

    return {
      value1:false,
      clientData: [],
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      items: [
        { LX: '日常检查', ZQ: "1周", ZB: '35%' },
        { LX: '抽查考核', ZQ: "不定期", ZB: '20%' },
        { LX: '集中评比', ZQ: "1月", ZB: '20%' },
        { LX: "被动接收", ZQ: "不定期", ZB: "25%" },
      ],
      select: {
        CPH: ''
      },
      addDialogTitle: "",
      isVisibleEdit: false,
      form: {
        WaterCPH: "",
        WaterTime: "",
        CreateTime: "",
        WaterNumber: "",
        WaterLocation: "",
        WaterCphType: "",
        WaterPeople: "",
        WaterPeopleID: "",
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        },]
      },
      value2: ''
    }
  },
  // created () {
  //   if (localStorage.getItem('CTYPE') == '0') {
  //     this.rolelevel.shift()
  //   } else if (localStorage.getItem('CTYPE') != '-1') {
  //     this.rolelevel = []
  //   }
  //   // this.getClientRoleList()
  // },
  mounted () {
    this.getTypeAssess()
  },
  methods: {
    async getTypeAssess () {
      var url = 'Assess/GetCheckType_Assess?TYPENAME='
      const { data } = await this.$Http.get(url)
      data.forEach(element => {
        if (element.CYCLE === '-1') {
          element.CYCLESTR = '不定期'
        } else {
          element.CYCLESTR = element.CYCLE + '日'
        }
      });
      this.originalData = data
      this.screeningData()
    },
    // 模糊查询
    screeningData () {
      this.currentPage = 1
      this.tableData = this.originalData
      if (this.select.name) this.tableData = this.tableData.filter(item => item.TYPENAME.includes(this.select.name))
    },
    // 模糊查询
    // screeningData () {
    //   if (this.select.name) this.items = this.items.filter(item => item.TYPENAME.includes(this.select.name))
    // },
    // 导入Excel
    // onChange (file, fileList) {
    //   //  console.log(fileList);
    //   this.fileData = file; // 保存当前选择文件
    //   this.readExcel(); // 调用读取数据的方法
    // },
    // // 读取数据
    // readExcel (e) {
    //   let that = this;
    //   const files = that.fileData;
    //   console.log(files);
    //   if (!files) {
    //     //如果没有文件
    //     return false;
    //   } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
    //     this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
    //     return false;
    //   }
    //   const fileReader = new FileReader();
    //   console.log(fileReader)
    //   fileReader.onload = ev => {
    //     try {
    //       const data = ev.target.result;
    //       //  console.log(ev.target)
    //       //  console.log(this);
    //       const workbook = this.XLSX.read(data, {
    //         type: "binary"// 以字符编码的方式解析
    //       });

    //       if (workbook.SheetNames.length >= 1) {
    //         //  this.$message({
    //         //    message: "导入数据表格成功",
    //         //    showClose: true,
    //         //    type: "success"
    //         //  });
    //         const wsname = workbook.SheetNames[0]; //取第一张表
    //         const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
    //         console.log(ws)
    //         this.inputExcelDataLength = ws.length
    //         this.fullscreenLoading = this.$loading({
    //           lock: true,
    //           text: 'Loading',
    //           spinner: 'el-icon-loading',
    //           background: 'rgba(0, 0, 0, 0.7)'
    //         })
    //         for (let i = 0, len = ws.length; i < len; i++) {
    //           var item = ws[i]
    //           //   var sheetData = {
    //           //     VID: item['居民电话'],
    //           //     RUBBISH_NAME: item["垃圾品名"],
    //           //     WEIGHT: item["垃圾称重"],
    //           //     photo: '',
    //           //     LONGITUDE: 0,
    //           //     LATITUDE: 0
    //           //   }
    //           //   let exceldata =  []
    //           //   exceldata.push(sheetData)
    //           this.addWeight(item)
    //         }
    //       } else {
    //         this.$message.error("未读取到表格内容");
    //       }
    //     } catch (e) {
    //       return false;
    //     }
    //   };
    //   // 如果为原生 input 则应是 files[0]
    //   fileReader.readAsBinaryString(files.raw);
    // },
    // async addWeight (item) {
    //   this.items.splice(3, 0, { LX: item['考核类型'], ZB: item['分值占比'] })
    //   this.$message.success('表格文件导入成功');
    //   this.fullscreenLoading.close()
    // },
    // 导出Excel
    exportExcel () {
      let excelName = '考核类型'
      const tHeader = ['编号', '考核类型', '考核周期']
      const filterVal = ['ID', 'TYPENAME', 'CYCLESTR']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    // 打开新增窗口
    handleAdd () {
      this.addDialogTitle = '新增考核类型信息'
      //清空编辑框
      this.form = {
        ID: "0",
        TYPENAME: "",
        CYCLE: "",
        title: '新增'
      }
      //展示窗口
      this.isVisibleEdit = true;
      // this.idEdit = false;
    },
    // 打开编辑窗口
    handleEdit (index, row) {
      this.form = Object.assign({}, row);
      this.form.title = '编辑'
      this.addDialogTitle = '编辑考核类型信息'
      this.isVisibleEdit = true;
    },
    // 新增/编辑
    async handleSubmit () {
      if (this.value1) {
        this.form.CYCLE = -1
      }
      this.$axios({
        url: 'Assess/SaveCheckType_Assess',
        method: 'post',
        data: this.form
      }).then(res => {
        if (res.data.IsSucess) {
          this.$message.success('考评组织机构' + this.form.title + '成功')
          this.isVisibleEdit = false
          this.getTypeAssess()
        } else {
          this.$message.error('考评组织机构' + this.form.title + '失败' + '，' + res.data.Message);
        }
      })
    },
    // 删除车辆信息
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        this.items.splice(row.ID - 1, 1)
        this.$message.success('删除成功')
        this.isVisibleEdit = false
      } else {
        this.$message.info('取消删除')
        this.isVisibleEdit = false
      }
    },
    
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getlistdata();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>